<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas</title>
  </head>
  <body>
    <!--
      1. 准备一个具备宽高的canvas
        canvas本身并不具备绘图能力，只是一个画布
        绘制的内容由js来控制
    -->
    <canvas id="charts" width="800" height="400"></canvas>
    <button id="btn">清空</button>
    <script>
      // 2. 获取画笔
      const charts = document.getElementById('charts')
      const ctx = charts.getContext('2d')

      // 开始绘画
      ctx.beginPath()
      ctx.arc(300, 200, 50, 0, 2 * Math.PI, true)
      ctx.stroke()
      // 结束绘画
      ctx.closePath()

      ctx.beginPath()
      ctx.arc(500, 200, 50, 0, Math.PI, true)
      ctx.stroke()
      ctx.closePath()

      btn.onclick = function() {
        ctx.clearRect(0, 0, 800, 400)
      }
    </script>
  </body>
</html>
